<template>
	<!-- 此组件用于题库练习的单题展示 -->
	<view>
		<!-- 大标题 -->
		<view class="header" id="header">
			<span v-if="type=='store'" > {{storeInfo.storeName}}题库练习</span>
			<span v-if="type=='error'" > {{storeInfo.storeName}}错题练习</span>
			<!-- <span class="header-button" @click='handleSubmit(1)' v-if='!isReviewed'>提交</span> -->
		</view>
		<!-- 小标题栏 -->
		<!-- 		<view id="subHeader">
			<view class="sub-header" v-if='questionList.length>0'>
		 		<clock v-if="(!isReviewed)&&examType=='paper'" ref="myClock" :timeOrigin="parseInt(examDetail.time)"></clock>
				<clock @clockend="clockend" ref="myClock"></clock>
				<u-toast ref="uToast" />
				<span class='sub-header-number' v-if="(examType=='paper' )|| (examType=='know')">第
					{{currentIndex+1}}/{{examDetail.totalQuestion}} 题</span>
			</view>
		</view> -->

		<!-- 答题区域 -->
		<swiper class="content" :duration='duration' :current=currentIndex @change='handleSwiperChanged'
			v-if='questionList.length>0' :style="{'height':swiperHeight}">
			<template v-for='item in questionList'>
				<swiper-item class="content-item">
					<scroll-view scroll-y :style="{'height':swiperHeight}">
						<!-- 显示题目的题干 -->
						<view class="content-title">
							<u-tag v-if="item.template == 1" class="typeTag" text="单选题" mode="dark" shape="circle" />
							<u-tag v-if="item.template == 2" class="typeTag" text="多选题" mode="dark" shape="circle" />
							<u-tag v-if="item.template == 3" class="typeTag" text="判断题" mode="dark" shape="circle" />
							<u-tag v-if="item.template == 4" class="typeTag" text="填空题" mode="dark" shape="circle" />
							<u-tag v-if="item.template == 5" class="typeTag" text="简答题" mode="dark" shape="circle" />
							<rich-text :nodes="item.queContent"></rich-text>
						</view>
						<!-- 以下显示选项 -->
						<!-- type == 1 单选题 -->
						<view class="content-solutions" v-if='item.template == 1'>
							<template v-for='subItem in item.toptions'>
								<view
									:class="[item.isReviewed && subItem.optAnswer == 1 ? 'right': '',item.isReviewed && (item.wrongArr.indexOf(subItem.optLetter) >-1)  ? 'wrong': '']"
									class="content-solutions-item" @click='chooseSolution(item,subItem)'>
									<view class="content-solutions-item-single">{{subItem.optLetter}}</view>
									<view
										:class="item.tempAnswer == subItem.optLetter? 'content-solutions-item-select' : ''"
										class="content-solutions-item-content">{{subItem.optContent}}</view>
								</view>
							</template>
						</view>
						<!-- type == 2 多选题 -->
						<view class="content-solutions" v-if='item.template == 2'>
							<template v-for='subItem in item.toptions'>
								<view
									:class="[item.isReviewed && subItem.optAnswer == 1 ? 'right': '',item.isReviewed && (item.wrongArr.indexOf(subItem.optLetter) >-1)  ? 'wrong': '']"
									class="content-solutions-item" @click='chooseMutiSolution(item,subItem)'>
									<view class="content-solutions-item-single">{{subItem.optLetter}}</view>
									<view
										:class="item.tempAnswer.indexOf(subItem.optLetter) >-1 ? 'content-solutions-item-select' : ''"
										class="content-solutions-item-content">{{subItem.optContent}}
									</view>
								</view>
							</template>
						</view>

						<!-- type == 3 判断题 -->
						<view class="content-solutions" v-if='item.template == 3'>
							<template v-for='(subItem,subIndex) in item.toptions' :keys="subIndex">
								<view class="content-solutions-judge">
									<view v-for="(judgeItem,judgeIndex) in judgeArr"
										:class="[item.tempAnswer == judgeItem.value? 'content-solutions-item-select' : '',item.isReviewed && (item.rightAnswer==judgeItem.name)  ? 'right': '',item.isReviewed && (item.wrongArr ==judgeItem.value)  ? 'wrong': '']"
										class="content-solutions-judge-item"
										@click='judgeSolution(item,judgeItem.value)'>{{judgeItem.name}}</view>
								</view>
							</template>
						</view>

						<!-- type == 4 填空题 -->
						<view class="content-solutions" v-if='item.template == 4'>
							<template>
								<view class="content-solutions-item" v-for='(subItem,subIndex) in item.toptions'
									:keys="subIndex"
									:class="[item.isReviewed && item.blankString != item.rightAnswer ? 'wrong':'']">
									<view class="content-solutions-item-single">{{subIndex+1}}</view>
									<input :disabled="item.isReviewed" type="text" class="content-solutions-blank"
										v-model="item.blankArr[subIndex]" placeholder="请在此处输入答案" />
									<!-- TODOvalue的绑定值不对 :value="item.blankArr[subIndex].replace(/&quot\;/g, '')" -->
									<!-- 	<input v-else :disabled="isReviewed" :value="item.blankArr"
																type="text" class="content-solutions-blank" /> -->
								</view>
							</template>
						</view>
						<!-- type == 5 简答题 -->
						<view class="content-solutions" v-if='item.template == 5'>
							<textarea v-if="!item.isReviewed" @input="textInput" :disabled="isReviewed"
								placeholder="请输入您的答案" auto-height />
							<textarea v-else :disabled="item.isReviewed"
								:value="item.tempAnswer.replace(/&quot\;/g, '')" auto-height />
						</view>
						<view class="explain" v-if='item.isReviewed'>

							<u-tag v-show="item.isRight==1" text="正确" type="success" />
							<u-tag v-show="item.isRight==2" text="错误" type="error" />
							<u-tag v-show="item.isRight==3" text="自行核对" type="warning" />

							<view class="explain-title">正确答案：</view>
							<!-- <span class="text">{{item.rightAnswer}}</span> -->
							<u-parse :html="item.rightAnswer"></u-parse>
							<view class="explain-title">试题解析:</view>
							<view class="explain-content">
								<u-parse :html="item.queAnalysis?item.queAnalysis:'暂无'"></u-parse>
							</view>
							<view class="noteArea">
								<view class="noteAreaTitle">
									<view class="explain-title">我的笔记:</view>
									<view v-if="eidtOrFinishValue=='编辑笔记'" class="funcGroup" @click="editBtnFunc(item)">
										<u-icon class="funcBtn" name="edit-pen"></u-icon>
										<span>编辑笔记</span>
									</view>
									<view v-else class="funcGroup" @click="finishBtnFunc(item)">
										<u-icon class="funcBtn" name="edit-pen"></u-icon>
										<span>完成</span>
									</view>
								</view>
								<!-- 只有回答过的题目才能编辑笔记！！！ -->
								<text-editor :noteId="item.id"
									:textContent="item.notes.length>0? item.notes[0].noteContent:''"
									:isreadOnly="isreadOnly" @editorInput='updateEditorText'>
								</text-editor>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</template>
		</swiper>

		<!-- 底部栏 -->
		<view class="footer" id="footer">
			<u-button type="success" shape="circle" @click="submitAns">提交</u-button>
			<u-button type="primary" shape="circle" @click="changeQues">换一题</u-button>
			<!-- <view class="footer-back" @click='handleChangeCurrentSwiper(-1)'>上一题</view>
			<view class="footer-card" @click="showQuestion = !showQuestion">答题卡</view>
			<view class="footer-right" @click='handleChangeCurrentSwiper(1)'>下一题</view> -->
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Modal from './modal.vue'
	import clock from '@/components/clock/clock.vue';
	export default {
		data() {
			return {
				isreadOnly: true,
				// isReviewed: false,
				quesModules: [],
				areaText: ``, //保存简答题答案
				judgeArr: [{
						name: '正确',
						value: '1'
					},
					{
						name: '错误',
						value: '0'
					}
				],
				currentIndex: 0,
				swiperHeight: '800px',
				modalHeight: '400px',
				modalContentHeight: '300px',
				showQuestion: false,
				articleEditorValue: '',
				eidtOrFinishValue: '编辑笔记',
				editor: 'editor',
				editorText: ''
			}
		},
		filters: {
			// 判断答案状态
			answerStatusFilter(item) {
				switch (item) {
					case 1:
						return '未答'
						break;
					case 2:
						return '答题正确'
						break;
					case 3:
						return '答题错误'
						break;
					case 4:
						return '未评分'
						break;
					case 5:
						return '已评分'
						break;
					case 6:
						return '已答'
						break;
					default:
						// ad
				}
			},

			analysisFilter(item) {
				if (item == null) {
					return "暂无解析"
				} else {
					return item
				}
			}
		},
		watch: {

		},
		computed: {
			storeInfo() {
				return this.$store.state.storeInfo
			},
			questionList() {
				return this.$store.state.questionList
			},
			max() {
				return this.questionList.length - 1
			},
		},
		props: {
			type: {
				type: String,
				default: 'error'
			},
			duration: {
				type: [String, Number],
				default: 300
			},
			// isReviewed: {
			// 	type: Boolean,
			// 	default: false
			// },

		},

		onReady() {
			this.$refs.myClock.start();
			// console.log('examDetail',this.examDetail);
		},
		components: {
			Modal,
			clock
		},
		methods: {
			/* 跳转指定题目 */
			handleJumpSwiper(index) {
				this.currentIndex = index
				this.showQuestion = false
			},
			end() {
				this.$refs.uToast.show({
					title: '考试时间结束，已自动交卷',
					type: 'warning'
				})
				setTimeout(() => {
					this.handleSubmit(0)
				}, 2000)
			},
			textInput(e) {
				this.areaText = e.detail.value
				// console.log(e.detail.value)
			},
			/* 滑动题目 */
			handleSwiperChanged(event) {
				this.currentIndex = event.detail.current
			},
			/* 调用上一页，下一页 */
			handleChangeCurrentSwiper(operation) {
				let max = this.questionList.length - 1
				let min = 0
				// 进行翻页
				if ((this.currentIndex > min && operation < 0) || (this.currentIndex < max && operation > 0)) {
					this.currentIndex += operation
					// console.log(this.currentIndex)
				}
			},
			/* 选择答案（单选）*/
			chooseSolution(item, subItem) {
				if (!item.isReviewed) {
					// tempAnswer为学生答案
					item.tempAnswer = subItem.optLetter
					// if (this.currentIndex < this.max) {
					// 	setTimeout(() => {
					// 		this.currentIndex += 1
					// 	}, 300)
					// }
				}
			},
			/* 选择答案（多选）*/
			chooseMutiSolution(item, subItem) {
				if (!item.isReviewed) {
					let answerIndex = item.dualChooseArr.indexOf(subItem.optLetter)
					if (answerIndex > -1) {
						// 该选项已经在数组中了
						item.dualChooseArr.splice(answerIndex, 1)
					} else {
						// 该选项不在数组中
						item.dualChooseArr.push(subItem.optLetter)
					}
					item.tempAnswer = item.dualChooseArr.join(',')
					// this.onAnswerChange(answerIndex)
				}
			},
			/* 判断题答案 */
			judgeSolution(item, value) {
				if (!item.isReviewed) {
					// tempAnswer为学生答案
					item.tempAnswer = value
					// if (this.currentIndex < this.max) {
					// 	setTimeout(() => {
					// 		this.currentIndex += 1
					// 	}, 300)
					// }
				}
			},
			changeQues() {
				if (this.currentIndex < this.max) {
					this.currentIndex += 1
				} else {
					this.$refs.uToast.show({
						title: '已无更多试题',
						type: 'warning',
					})
				}
			},
			submitAns() {
				//--------------
				// 对各题型的答案进行处理
				let that = this
				switch (that.questionList[that.currentIndex].template) {
					case 1:
						// 选择题
						if (that.questionList[that.currentIndex].rightAnswer == that.questionList[that.currentIndex]
							.tempAnswer) {
							// 回答正确
							that.questionList[that.currentIndex].isRight = 1
						} else {
							// 回答错误
							that.questionList[that.currentIndex].isRight = 2
						}
						var rightArr = that.questionList[that.currentIndex].rightAnswer.split(',')
						var userArr = that.questionList[that.currentIndex].tempAnswer.split(',')
						that.questionList[that.currentIndex].wrongArr = [] // 保存选中的错误的选项

						for (var item of userArr) {
							// 用户的该答案不在正确答案数组在
							if (rightArr.indexOf(item) < 0) {
								that.questionList[that.currentIndex].wrongArr.push(item)
							}
						}
						break;
					case 2:
						var rightArr = that.questionList[that.currentIndex].rightAnswer.split(',').sort()
						var userArr = that.questionList[that.currentIndex].tempAnswer.split(',').sort()
						// that.questionList[that.currentIndex].wrongArr = [] // 保存选中的错误的选项

						for (var i = 0; i < rightArr.length; i++) {
							if (rightArr.length != userArr.length) {
								// 回答错误，漏选了
								that.questionList[that.currentIndex].isRight = 2
							} else {
								if (rightArr[i] != userArr[i]) {
									// 回答错误
									that.questionList[that.currentIndex].isRight = 2
								}
								// 回答正确
								that.questionList[that.currentIndex].isRight = 1
							}
						}
						for (var item of userArr) {
							// 用户的该答案不在正确答案数组在
							if (rightArr.indexOf(item) < 0) {
								that.questionList[that.currentIndex].wrongArr.push(item)
							}
						}
						break;
					case 3:
						if (that.questionList[that.currentIndex].rightAnswer == that.questionList[that
								.currentIndex]
							.tempAnswer) {
							// 回答正确
							that.questionList[that.currentIndex].isRight = 1
						} else {
							// 回答错误
							that.questionList[that.currentIndex].isRight = 2
						}
						// 判断题
						if (that.questionList[that.currentIndex].tempAnswer != that.questionList[that.currentIndex]
							.toptions[0].optAnswer) {
							that.questionList[that.currentIndex].wrongArr = that.questionList[that.currentIndex]
								.tempAnswer
						}
						break;
					case 4:
						// 填空题
						that.questionList[that.currentIndex].tempAnswer = that.questionList[that.currentIndex]
							.blankArr.join('||~||') // 数组拼接为字符串
						that.questionList[that.currentIndex].isRight = 3 // 自行核对
						break;
					case 5:
						that.questionList[that.currentIndex].isRight = 3 // 自行核对
						that.questionList[that.currentIndex].tempAnswer = JSON.stringify(that.areaText)
						break;
					default:
				}
				console.log('提交题库的信息', that.questionList[that.currentIndex].id, that.$store.state.storeInfo
					.storeId);
					
				if(that.type == 'store'){
				that.$api.storeSave(that.questionList[that.currentIndex].id, that.$store.state.storeInfo.storeId)
					.then(res => {
						that.questionList[that.currentIndex].isReviewed = !that.questionList[that.currentIndex]
							.isReviewed
						if (res.status == 1) {
							console.log('保存题库练习记录失败', res);
							uni.showToast({
								title: '提交失败',
								duration: 2000,
								image: '../../static/error.png'
							});
						} else {
							console.log('保存题库练习记录成功', res);
							// this.isReviewed = !this.isReviewed
						}
					})
					.catch(res => {
						uni.showToast({
							title: '提交失败',
							duration: 2000,
							image: '../../static/error.png'
						});
						console.log("提交失败");
					})
					
				}
				// ------------------------
			},

			// 点击编辑笔记
			editBtnFunc(item) {
				// if (item.theoryExamAnswer.id == undefined) {
				// 	this.$refs.uToast.show({
				// 		title: '未作答的题目不可编辑笔记！',
				// 		type: 'error',
				// 		// url: '/pages/user/index'
				// 	})
				// 	return
				// }
				this.isreadOnly = !this.isreadOnly
				this.eidtOrFinishValue = '完成'
			},
			// 完成编辑
			finishBtnFunc(item) {
				var that = this
				this.isreadOnly = !this.isreadOnly
				this.eidtOrFinishValue = '编辑笔记'
				console.log('保存笔记内容', item, that.editorText);
				this.$api.addNote(item.id, that.editorText)
					.then(res => {
						console.log('更新笔记成功', res)
					})
			},
			updateEditorText(text) {
				// 从子组件获取输入框输入内容
				this.editorText = text
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	#header,
	#subHeader {
		height: 100rpx;
	}

	.header {
		position: relative;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: 600;
		color: $theme-color;
		letter-spacing: 10rpx;

		&-button {
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			position: absolute;
			top: 20rpx;
			right: 40rpx;
			padding: 10rpx 20rpx;
			border-radius: 15rpx;
			letter-spacing: 2rpx;
			font-weight: 500;
			color: #FFFFFF;
			background-color: $theme-color;
		}

		.scoreText {
			color: #00b060;
			font-size: 35rpx;
		}
	}

	.sub-header {
		padding: 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		font-size: 33rpx;
		font-weight: bold;
	}

	.content {
		letter-spacing: 3rpx;

		.typeTag {
			margin-right: 20rpx;
		}

		&-item-explain {
			padding-bottom: 20rpx;
			font-size: 30rpx;
			color: #8799a3;
			letter-spacing: 5rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.1);

			&-result {
				padding: 20rpx 0;

				span {
					padding-left: 20rpx;
					color: #39b54a;
				}
			}

			&-content {
				padding: 20rpx 0;
			}
		}

		&-item {
			padding: 0 20rpx;
			box-sizing: border-box;
		}

		&-title {
			margin-bottom: 30rpx;
			font-size: 32rpx;
			line-height: 55rpx;
			color: #000
		}

		&-solutions {
			width: 100%;
			padding-bottom: 20rpx;

			&-item {
				margin: 40rpx 0;
				border: 5rpx solid $theme-color;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				font-size: 30rpx;
				background-color: $theme-color;

				&-check-content {
					padding: 35rpx 20rpx;
					width: 100%;
					border-radius: 15rpx;
					color: $theme-color;
					background-color: #FFFFFF;
				}

				&-single {
					width: 80rpx;
					text-align: center;
					color: #FFFFFF;
				}

				&-content {
					padding: 35rpx 20rpx;
					width: 630rpx;
					border-top-right-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
					color: #000;
					background-color: #FFFFFF;
				}

				&-select {
					color: #FFFFFF;
					background-color: $theme-color;
				}
			}

			&-judge {
				display: flex;
				justify-content: space-around;
				background-color: #FFFFFF;
				padding: 20rpx;
				text-align: center;
				font-size: 30rpx;

				.content-solutions-judge-item {
					border: 5rpx solid $theme-color;
					border-radius: 60rpx;
					width: 300rpx;
					padding: 35rpx 20rpx; // 控制单元格的高度
				}

				.content-solutions-judge-select {
					color: #FFFFFF;
					background-color: $theme-color;
				}

			}

			&-blank {
				// border: 5rpx solid $theme-color;
				height: 60rpx;
				width: 90%;
				// border-radius: 20rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
			}

			&-fillItem {
				border: 5rpx solid $theme-color;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
			}
		}

		.explain {
			border-top: solid #999999 1px;
			padding-top: 10rpx;
			font-size: 28rpx;
			color: #666666;

			.explainResult {
				color: $theme-color;
			}

			.explain-title {
				font-weight: bold;
			}

			.noteArea {
				border-top: 2rpx solid $theme-color;
				padding-top: 10rpx;

				// background-color: #0077AA;
				.noteAreaTitle {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 100rpx;
		padding: 30rpx 20rpx;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 0;
		font-size: 30rpx;
		box-sizing: border-box;
		color: #4c8af3;
		box-shadow: 0 0 5px 1px #eee;
		background-color: #FFFFFF;

		&-card {
			padding: 10rpx 20rpx;
			border: 1px solid $theme-color;
			border-radius: 15rpx;
			color: #FFFFFF;
			background-color: $theme-color;
		}
	}

	.question-modal {
		width: 700rpx;
		padding: 40rpx;
		background-color: #FFFFFF;

		&-header {
			height: 100rpx;
			text-align: center;
			font-size: 35rpx;
			line-height: 100rpx;
			color: #333333;
			border-bottom: 1rpx solid #F0F0F0;
		}

		&-body {

			&-item {
				width: 80rpx;
				margin: 10rpx 22rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 35rpx;
				display: inline-block;
				text-align: center;
				border-radius: 50%;
				color: #8799a3;
				// background-color: #0077AA;
			}

			&-item-failed {
				color: #FFFFFF;
				background-color: #982121;
			}

			&-item-right {
				color: #FFFFFF;
				background-color: #39b54a;
			}

			&-item-select {
				color: #FFFFFF;
				background-color: $theme-color;
			}
		}

		.question-modal-foot {
			height: 100rpx;
			border-top: 1rpx solid #F0F0F0;
			margin-top: -60rpx;

			.ansBlock {
				display: flex;
				justify-content: center;

				// align-items: center;
				.blockItem {
					display: flex;
					align-items: center;
					margin: 20rpx;
				}

				.block-ansed {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: $theme-color;
					margin: 0 10rpx;
				}

				.block-unansed {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: solid #999999 1px;
					// background: $font-color-ps ;
					margin: 0 10rpx;
				}

				.block-right {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #39b54a;
					margin: 0 10rpx;
				}

				.block-wrong {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #982121;
					margin: 0 10rpx;
				}
			}

		}
	}

	.right {
		border: 8rpx solid #39b54a;
	}

	.wrong {
		border: 8rpx solid #d81717;
	}
</style>
